<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>手机端滑动改变内容</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
    html,body{
        height: 100%;
    }
	ul{
		list-style: none;
        
	}
    .mobile{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .tab{
        width: 100%;
        overflow: scroll;
		line-height: 35px;
    }
    .tab::-webkit-scrollbar {
        display:none
    }
	.tab ul{
        width: 900px;
        display: flex;
    }
    .tab ul li{
        width: 100px;
		text-align: center;
    }
    .content{
        flex:1;
        overflow: hidden;
    }
    .content ul{
        display: flex;
        height: 100%;
    }
    .content ul li{
        flex: 1;
    }

</style>
</head>
<body>
	<div class="mobile">
		<div class="tab">
			<ul>
				<li class="tab-item">推荐</li>
				<li class="tab-item">小说</li>
				<li class="tab-item">电影</li>
				<li class="tab-item">手机</li>
				<li class="tab-item">热点</li>
				<li class="tab-item">问答</li>
				<li class="tab-item">科技</li>
				<li class="tab-item">汽车</li>
				<li class="tab-item">段子</li>
				<li class="tab-item">天气</li>
				<li class="tab-item">代码</li>
				<li class="tab-item">糗事</li>
				<li class="tab-item">电脑</li>
				<li class="tab-item">游戏</li>
				<li class="tab-item">直播</li>
				<li class="tab-item">生活</li>
				<li class="tab-item">分享</li>
				<li class="tab-item">呵呵</li>
			</ul>
		</div>
		<div class="content">
			<ul>
				<li style="background-color: #f78e88" class="content-item">推荐</li>
				<li style="background-color: #f7c988" class="content-item">小说</li>
				<li style="background-color: #e6e6b0" class="content-item">电影</li>
				<li style="background-color: #cde6b0" class="content-item">手机</li>
				<li style="background-color: #4cca49" class="content-item">热点</li>
				<li style="background-color: #87e8e7" class="content-item">问答</li>
				<li style="background-color: #87b8e8" class="content-item">科技</li>
				<li style="background-color: #b1a5fb" class="content-item">汽车</li>
				<li style="background-color: #f9a5fb" class="content-item">段子</li>
				<li style="background-color: #e05750" class="content-item">天气</li>
				<li style="background-color: #a87b3c" class="content-item">代码</li>
				<li style="background-color: #a5a53d" class="content-item">糗事</li>
				<li style="background-color: #a1e94f" class="content-item">电脑</li>
				<li style="background-color: #3d7a3c" class="content-item">游戏</li>
				<li style="background-color: #3badab" class="content-item">直播</li>
				<li style="background-color: #3888d8" class="content-item">生活</li>
				<li style="background-color: #392d8a" class="content-item">分享</li>
				<li style="background-color: #8f3491" class="content-item">呵呵</li>
			</ul>
		</div>
	</div>
	<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
	<script src="slide.js"></script>
	<script>
		$(function() {
			$(".mobile").Slide({
				pagination:false,
				interval:5000
			})
		})
	</script>
</body>
</html>